import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:ati_package/core/routes/app_routes.dart';
import 'package:ati_package/core/utils/ati_color.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../core/utils/ati_assets.dart';
import '../../../../core/utils/ati_font.dart';

class MyWallectView extends StatefulWidget {
  const MyWallectView({super.key});

  @override
  State<MyWallectView> createState() => _MyWallectViewState();
}

class _MyWallectViewState extends State<MyWallectView> {
  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      extendBodyBehindAppBar: true,
      titleColor: AtiColor.textHLColor1,
      barBgColor: Colors.transparent,
      title: '我的钱包',
      body: Stack(children: [buildBgImage(), _buildContextWidgets()]),
    );
  }

  Widget buildBgImage() {
    return Container(
      height: 200.r,
      width: Get.width,
      decoration: BoxDecoration(color: Color(0xFF13BF78)),
    );
  }

  _buildContextWidgets() {
    return SafeArea(
      bottom: false,
      child: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(top: 30.r, left: 16.r, right: 16.r),
          child: Column(
            children: [
              _buildHeaderWidget(),
              _buildMiddleWidgets(),
              _buildFootWidgets(),
            ],
          ),
        ),
      ),
    );
  }

  _buildHeaderWidget() {
    return Container(
      height: 116.r,
      margin: EdgeInsets.only(bottom: 12.r),
      padding: EdgeInsets.symmetric(horizontal: 20.r),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.r),
          topRight: Radius.circular(20.r),
        ),
      ),
      child: Row(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Text(
                    '我的资产',
                    style: TextStyle(
                      color: AtiColor.textColor1,
                      fontSize: AtiFont.font14,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(width: 10.r),
                  Image.asset(
                    width: 20.r,
                    height: 20.r,
                    AtiAssets.atiEyeOpent,
                    color: AtiColor.textColor1,
                    package: 'ati_package',
                  ),
                ],
              ),
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: '23480.00',
                      style: TextStyle(
                        color: AtiColor.primary,
                        fontWeight: FontWeight.w700,
                        fontSize: 26.r,
                      ),
                    ),
                    TextSpan(
                      text: " USDT",
                      style: TextStyle(
                        color: AtiColor.primary,
                        fontSize: AtiFont.font12,
                      ),
                    ),
                  ],
                ),
              ),
              Row(
                children: [
                  Text(
                    '相当于¥211,271,10 CNY',
                    style: TextStyle(
                      color: Color(0xFF666666),
                      fontSize: AtiFont.font12,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    '1USDT≈7.24 CNY',
                    style: TextStyle(
                      color: Color(0xFF666666),
                      fontSize: AtiFont.font12,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Spacer(),
          Container(
            padding: EdgeInsets.symmetric(vertical: 5.r, horizontal: 15.r),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.r),
              border: Border.all(width: 1.r, color: AtiColor.primary),
            ),
            child: Text(
              '账单',
              style: TextStyle(
                color: AtiColor.primary,
                fontSize: AtiFont.font12,
                fontWeight: FontWeight.w500,
              ),
            ),
          ).addTapGesture(
            onTap: () {
              Get.toNamed(AtiAppRoutes.userBillDet);
            },
          ),
        ],
      ),
    );
  }

  _buildMiddleWidgets() {
    return Row(
      children: [
        _buildMiddleItem(
          titleStr: '充值中心',
          typeImageStr: AtiAssets.userWalltRecharge,
          typeBgImageStr: AtiAssets.userWalltRegBg,
        ).addTapGesture(
          onTap: () {
            Get.toNamed(AtiAppRoutes.userWalletRecharge);
          },
        ),

        _buildMiddleItem(
          titleStr: '提现中心',
          typeImageStr: AtiAssets.userWalltWithdraw,
          typeBgImageStr: AtiAssets.userWalltWitBg,
        ).addTapGesture(
          onTap: () {
            Get.toNamed(AtiAppRoutes.userWalletWithdraw);
          },
        ),
      ],
    );
  }

  Widget _buildMiddleItem({
    String? titleStr,
    String? typeImageStr,
    String? typeBgImageStr,
  }) {
    return Container(
      height: 58.r,
      width: (Get.width - 36.r) / 2,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(typeBgImageStr!, package: 'ati_package'),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            width: 30.r,
            height: 30.r,
            typeImageStr!,
            package: 'ati_package',
          ),
          SizedBox(width: 5.r),
          Text(
            titleStr!,
            style: TextStyle(
              color: AtiColor.textHLColor1,
              fontSize: AtiFont.font12,
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }

  _buildFootWidgets() {
    return Container(
      child: Column(
        children: [
          _buildFootItem(
            title: '红包与转账',
            itemTitleOne: '我收到的(USDT)',
            moneyOne: '29166.00',
            itemTitleTow: '我发出的(USDT)',
            moneyTow: '29166.00',
            subTitleOne: '红包(个)',
            subTitleTow: '转账(笔)',
            subContentOne: '23',
            subContentTow: '23',
            showType: '2',
          ),
          _buildFootItem(
            title: '充值与提现',
            itemTitleOne: '我充值的(USDT)',
            moneyOne: '29166.00',
            itemTitleTow: '我提现的(USDT)',
            moneyTow: '29166.00',
            subTitleOne: '充值(笔))',
            subTitleTow: '提现(笔)',
            subContentOne: '23',
            subContentTow: '23',
          ),
        ],
      ),
    );
  }

  _buildFootItem({
    String? title,
    String? itemTitleOne,
    String? itemTitleTow,
    String? moneyOne,
    String? moneyTow,
    String? subTitleOne,
    String? subTitleTow,
    String? subContentOne,
    String? subContentTow,
    String? showType,
  }) {
    return Container(
      margin: EdgeInsets.only(top: 20.r),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title!,
            style: TextStyle(
              color: AtiColor.textColor1,
              fontSize: AtiFont.font16,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(height: 10.r),
          Row(
            children: [
              _buildRedWidgets(
                itemTitle: itemTitleOne,
                money: moneyOne,
                subTitleOne: subTitleOne,
                subTitleTow: subTitleTow,
                subContentTow: subContentTow,
                subContentOne: subContentOne,
                showType: showType,
              ),
              SizedBox(width: 10.r),
              _buildRedWidgets(
                itemTitle: itemTitleTow,
                money: moneyTow,
                subTitleOne: subTitleOne,
                subTitleTow: subTitleTow,
                subContentTow: subContentOne,
                subContentOne: subContentTow,
                showType: showType,
              ),
            ],
          ),
        ],
      ),
    );
  }

  _buildRedWidgets({
    String? itemTitle,
    String? money,
    String? subTitleOne,
    String? subTitleTow,
    String? subContentOne,
    String? subContentTow,
    String? showType,
  }) {
    print('showType == ${showType}');
    return Container(
      width: (Get.width - 46.r) / 2,
      height: (Get.width - 46.r) / (2 * 1.43),
      padding: EdgeInsets.only(top: 16.r, bottom: 2.5.r, left: 5.r, right: 5.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10.r),
      ),
      child: Column(
        children: [
          Text(
            itemTitle ?? '',
            style: TextStyle(
              color: AtiColor.textColor1,
              fontSize: AtiFont.font12,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(height: 4.r),
          Text(
            money ?? '',
            style: TextStyle(
              color: AtiColor.primary,
              fontSize: AtiFont.font20,
              fontWeight: FontWeight.w600,
            ),
          ),

          Container(
            padding: EdgeInsets.only(
              top: 10.r,
              bottom: 8.r,
              left: 5.r,
              right: 5.r,
            ),
            decoration: BoxDecoration(
              color: Color(0xFFE5F9FF),
              borderRadius: BorderRadius.circular(10.r),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  children: [
                    Text(
                      itemTitle!.contains('提现')
                          ? subTitleTow ?? ''
                          : subTitleOne ?? '',
                      style: TextStyle(
                        color: AtiColor.textColor1,
                        fontSize: AtiFont.font10,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Text(
                      itemTitle.contains('提现')
                          ? subContentTow ?? ''
                          : subContentOne ?? '',
                      style: TextStyle(
                        color: AtiColor.textColor1,
                        fontSize: AtiFont.font10,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
                if (showType == '2') ...[
                  SizedBox(width: 15.r),
                  Column(
                    children: [
                      Text(
                        subTitleTow ?? '',
                        style: TextStyle(
                          color: AtiColor.textColor1,
                          fontSize: AtiFont.font10,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      Text(
                        subContentTow ?? '',
                        style: TextStyle(
                          color: AtiColor.textColor1,
                          fontSize: AtiFont.font10,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ],
              ],
            ),
          ),
        ],
      ),
    );
  }
}
